<script setup xmlns:el-col="http://www.w3.org/1999/html">

import bg1 from "../assets/1.jpg"
import router from "@/utils/router.js";
const open1=()=>{
  router.push("/main")
}
</script>

<template>
  <el-backtop :bottom="100">
    <div
        style="
        height: 100%;
        width: 100%;
        background-color: white;
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
line-height: 40px;
        font-size: 20px;
        color: #000205;
      "
    >
    顶部
    </div>
  </el-backtop>
  <div style="height: 100%;background-repeat: no-repeat" class="shadow" >
<!--    <img :src="bg1">-->
   <div class="imgbox1">
<el-row>
  <el-col :span="12" class="col" >
    <p style="color:#3aa658;text-align: center;margin-top: 25%;font-size: 50px">欢迎您使用Xfee小助手</p>
    <el-button size="large" style="align-items: center;margin-left: 30%;margin-bottom:3%;border-radius: 6%;font-size: large;width: 30%" type="success" @click="open1">开始使用</el-button>
  </el-col>
</el-row>

   </div>
    <div class="imgbox2">
      <el-row>
        <el-col :span="12"></el-col>
        <el-col :span="12" class="col">
          <p style="color:#3659ab;text-align: left;margin-top: 25%;font-size: 28px">感谢您使用Xfee人工智能小助手！我们将为您提供问题咨询,PPt生成，文案写作，语音合成与识别等人工智能服务</p>
        </el-col>
      </el-row>

    </div>
    <div class="imgbox3">


    </div>
    <div class="imgbox4">


    </div>
    <div class="imgbox5">


    </div>

  </div>
</template>

<style scoped>

.imgbox1 {
  background: url('../assets/1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 768px;


}
.col{
  height: 470px;
  margin-top: 8%;
  border: 1px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.imgbox2{
  background: url('../assets/2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 768px;

  border: 1px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 10px;

}
.imgbox3{
  background: url('../assets/2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 768px;

  border: 1px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 10px;

}
.imgbox4{
  background: url('../assets/4.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 768px;

  border: 1px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 10px;

}
.imgbox5{
  background: url('../assets/5.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 768px;

  border: 1px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 10px;

}
</style>